<link rel="stylesheet" type="text/css" href="<?= $base_url ?>css/fmis/meeting/view.css"/>
<div class="meeting">
    <div class="view">
        <div class="container-fluid">
            <div class="col-lg-12">
                <ul class="nav nav-tabs" id="tab-meeting" style="font-family:Georgia; font-weight:bold">
                    <li class="active"><a href="#view" data-toggle="tab">View Meetings</a></li>
                    <li><a href="#record" data-toggle="tab">Record Meeting</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="view">
                        <h2>List of Meetings</h2>
                        <div class="meeting-table">
                            <div class="meeting-table-head container-fluid">
                                <div class="col-lg-2">
                                    Meeting Name
                                </div>
                                <div class="col-lg-2">
                                    Location
                                </div>
                                <div class="col-lg-2">
                                    Date
                                </div>
                                <div class="col-lg-2">
                                    Time
                                </div>
                                <div class="col-lg-2">
                                    Status
                                </div>
                                <div class="col-lg-2">
                                    Recorder
                                </div>
                            </div>
                            <div class="meeting-table-body container-fluid">
                                <?php foreach($meetings as $meeting){
                                ?>
                                    <div class="meeting-table-row col-lg-12 container-fluid">
                                        <a href="<?= $base_url?>fmis/meeting/viewmeeting/<?= $meeting['MeetingID']?>" class="container-fluid col-lg-12">
                                            <span class="col-lg-2">
                                                <?= $meeting['MeetingName']?>
                                            </span>
                                            <span class="col-lg-2">
                                                <?= $meeting['Location']?>
                                            </span>
                                            <span class="col-lg-2">
                                                <?= date_format(date_create($meeting['DateTime']), 'm/d/Y')?>
                                                <!--<?= date('m/d/Y', $meeting['DateTime']); echo $meeting['DateTime'];?>-->
                                            </span>
                                            <span class="col-lg-2">
                                                <?= date_format(date_create($meeting['DateTime']), 'h:i:sa')?>
                                                <!--<?= date('h:i:sa', $meeting['DateTime'])?>-->
                                            </span>
                                            <span class="col-lg-2">
                                                <?= $meeting['Status']?>
                                            </span>
                                            <span class="col-lg-2">
                                                <?= $meeting['RecorderName']?>
                                            </span>
                                        </a>
                                        <span class="col-lg-12">
                                            <a href = '<?= $base_url?>fmis/meeting/remove/'<?= $meeting['MeetingID']?>> Remove </a>
                                        </span>
                                    </div>
                                <?php } ?>
                            </div>
                        </div>

                    </div>
                    <div class="tab-pane" id="record">
                        <h2>Record New Meeting</h2>
                        <?php echo form_open('fmis/meeting/addmeeting', array('id' => 'form_record_meeting'))?>
                            <div class="container-fluid">
                                <div class="col-lg-12 container-fluid" id="basic_info">
                                    <legend>Basic Information</legend>
                                    <div class="col-lg-12 container-fluid">
                                        <div class="col-lg-12">
                                            <label for="edit_meetingname">Meeting Name:</label> <input type="text" id="edit_meetingname" name="edit_meetingname" />
                                        </div>
                                    </div>
                                    <div class="col-lg-12 container-fluid">
                                        <div class="col-lg-6">
                                            <label for="edit_date">Date: </label> <input type="text" id="edit_date" name="edit_date">
                                        </div>
                                        <div class="col-lg-6">
                                            <label for="edit_time">Time: </label> <input type="text" id="edit_time" name="edit_time">
                                        </div>
                                    </div>
                                    <div class="col-lg-12 container-fluid">
                                        <div class="col-lg-6">
                                            <label for="edit_location">Location: </label> <input type="text" id="edit_location" name="edit_location">
                                        </div>
                                        <div class="col-lg-6">
                                            <label for="edit_status">Status: </label>
                                            <select id="edit_status" name="edit_status">
                                                <?php foreach($statuses as $status){ ?>
                                                    <option value=<?= $status['StatusID']?>><?= $status['Description']?></option>
                                                <?php }?>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 container-fluid" id="details">
                                    <legend>Details</legend>
                                    <div class="col-lg-12 container-fluid">
                                        <div class="col-lg-4">
                                            <label for="edit_agenda">Agenda: </label>
                                            <textarea id="edit_agenda" name="edit_agenda" rows="5" cols="20"></textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            <center>
                                                <label for="profile_fields">Faculties: </label>
                                                <select id="profile_fields" size="13" ondblclick="insertValueQuery()" multiple="multiple">
                                                    <?php foreach($profiles as $profile){
                                                        $option = $profile['LastName'].", ".$profile['MiddleName']." ".$profile['FirstName'];
                                                    ?>
                                                        <option id = "<?= $profile['MemberID']?>"><?= $option?></option>
                                                    <?php }?>
                                                </select>
                                                <button type = 'button' id = 'btn_addAttendee' class = "button">
                                                    Add Attendee
                                                </button>
                                            </center>
                                        </div>
                                        <div class="col-lg-4">
                                            <center>
                                                <label for="input-attendees">Attendees: </label> <select id="attendee_fields" size="13"multiple="multiple"></select>
                                                <button type = 'button' id = 'btn_removeAttendee' class = "btn-mini">
                                                    Remove Attendee
                                                </button>
                                            </center>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <center>
                            <br/>
                            <br/>
                            <button id="btn_record_meeting" type="button" class="button button-primary">Add Meeting</button>
                            <button type="reset" class="button">Reset</button>
                        </center>
                        <input id="id_list" type="hidden" name="id_list" value="">
                        <?php echo form_close();?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    $(function(){

        $('#id_list').val('');

        $('#edit_date').datepicker();
        $('#edit_time').timepicker({
            showPeriod: true,
            showLeadingZero: true
        });

    })

    $('#btn_addAttendee').click(
        function(){
            selectedOption = $('#profile_fields option:selected');
            attendees = $('#attendee_fields');
            idAttending = $('#id_list');

            for(i =0 ;i < selectedOption.length; i++)
            {
                id = $(selectedOption[i]).attr('id');
                string = '<option id="' + id;
                string += '"> ' + $(selectedOption[i]).html();
                string += '</option>';

                //attendees.html(attendees.html() + string);
                idAttending.attr('value', id + ' ' + idAttending.attr('value'));
                attendees.append(string);
                $(selectedOption[i]).remove();
            }
            idAttending.attr('value', idAttending.attr('value').trim())
        }
    )

    $('#btn_removeAttendee').click(
        function(){
            selectedOption = $('#attendee_fields option:selected');
            faculties = $('#profile_fields');
            idAttending = $('#id_list');

            valueIdAttending = '';
            for(i =0 ;i < selectedOption.length; i++)
            {
                id = $(selectedOption[i]).attr('id');
                string = '<option id="' + id;
                string += '"> ' + $(selectedOption[i]).html();
                string += '</option>';

                value = idAttending.attr('value');
                idAttending.attr('value', value.replace(id, '').split());
                faculties.append(string);
                $(selectedOption[i]).remove();
            }
        }
    )

    $('#btn_record_meeting').click(
        function(){
            $('#form_record_meeting').submit();
        }
    )
</script>